React Native এর জন্য Advanced Navigation Techniques

React Native অ্যাপ্লিকেশনগুলোতে Navigation খুবই গুরুত্বপূর্ণ, কারণ এটি অ্যাপের স্ক্রীনগুলোর মধ্যে ব্যবহারকারীর চলাচল এবং ডেটা স্থানান্তরকে সহজ করে তোলে। React Native এর জন্য React Navigation একটি জনপ্রিয় লাইব্রেরি যা স্ক্রীন ট্রানজিশন, স্ট্যাক, ট্যাব, ড্রয়ার, পারমুটেশন এবং প্যারামিটার পাস করার মতো নেভিগেশন ফিচারগুলির জন্য একাধিক সুবিধা প্রদান করে।

এখানে Advanced Navigation Techniques নিয়ে আলোচনা করা হবে, যেমন Nested Navigators, Deep Linking, Passing Parameters, Tab Bar Customization, এবং Stack Navigation Customization।

১. Nested Navigators (Nested Stack, Tab, Drawer Navigation)

React Native অ্যাপ্লিকেশনে অনেক সময় একাধিক navigators একসাথে ব্যবহার করতে হয়। উদাহরণস্বরূপ, একটি অ্যাপে Stack, Tab, এবং Drawer নেভিগেটরগুলো একত্রে কাজ করতে পারে। এই ধরনের নেভিগেটরকে Nested Navigation বলা হয়, যেখানে একটি নেভিগেটর অন্য একটি নেভিগেটরের ভিতরে ব্যবহৃত হয়।

উদাহরণ: Nested Stack এবং Tab Navigation

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { View, Text } from 'react-native';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const HomeScreen = () => (
  <View><Text>Home Screen</Text></View>
);

const ProfileScreen = () => (
  <View><Text>Profile Screen</Text></View>
);

const SettingsScreen = () => (
  <View><Text>Settings Screen</Text></View>
);

const AppStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </Stack.Navigator>
);

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={AppStack} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

ব্যাখ্যা:

• এখানে Tab.Navigator এর মধ্যে একটি Stack.Navigator ব্যবহৃত হয়েছে। এটি Nested Navigation এর একটি উদাহরণ যেখানে আপনি ট্যাবসের মধ্যে একটি স্ট্যাক নেভিগেটর ব্যবহার করতে পারেন।

২. Deep Linking

Deep Linking হল এমন একটি পদ্ধতি যার মাধ্যমে আপনি অ্যাপ্লিকেশনটির নির্দিষ্ট স্ক্রীনে সরাসরি যাওয়ার জন্য URL ব্যবহার করতে পারেন। এটি মূলত পুশ নোটিফিকেশন বা অন্য কোনো অ্যাপ থেকে নির্দিষ্ট স্ক্রীনে যাওয়ার জন্য ব্যবহৃত হয়।

উদাহরণ: Deep Linking সেটআপ

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text } from 'react-native';

const Stack = createStackNavigator();

const HomeScreen = () => (
  <View><Text>Home Screen</Text></View>
);

const ProfileScreen = () => (
  <View><Text>Profile Screen</Text></View>
);

const App = () => {
  return (
    <NavigationContainer
      linking={{
        prefixes: ['myapp://'],
        config: {
          screens: {
            Home: '',
            Profile: 'profile',
          },
        },
      }}
    >
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

ব্যাখ্যা:

• linking অপশন ব্যবহার করে অ্যাপ্লিকেশনটির মধ্যে deep link সেট করা হয়েছে, যেমন myapp://profile URL এর মাধ্যমে Profile স্ক্রীনে যাওয়ার সুবিধা মিলবে।

৩. Passing Parameters Between Screens

React Native নেভিগেশনে স্ক্রীনগুলোর মধ্যে parameters পাঠানো এবং গ্রহণ করা একটি গুরুত্বপূর্ণ ফিচার। আপনি নেভিগেশন অ্যাকশনগুলোর মাধ্যমে স্ক্রীনগুলোর মধ্যে ডেটা পাস করতে পারেন।

উদাহরণ: Passing Parameters in Stack Navigation

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>Home Screen</Text>
    <Button
      title="Go to Profile"
      onPress={() => navigation.navigate('Profile', { userId: 42 })}
    />
  </View>
);

const ProfileScreen = ({ route }) => {
  const { userId } = route.params;
  return (
    <View>
      <Text>Profile Screen</Text>
      <Text>User ID: {userId}</Text>
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

ব্যাখ্যা:

• navigation.navigate এর মাধ্যমে Profile স্ক্রীনে userId প্যারামিটার পাঠানো হয়েছে।
• route.params ব্যবহার করে Profile স্ক্রীনে প্যারামিটার গ্রহণ করা হয়েছে।

৪. Tab Bar Customization

React Navigation এ Tab Bar কাস্টমাইজ করা যায়, যেমন ট্যাব আইকন, টেক্সট, এবং ট্যাব বার এর স্টাইল পরিবর্তন করা। আপনি tabBarOptions অথবা screenOptions ব্যবহার করে কাস্টম স্টাইল করতে পারেন।

উদাহরণ: Custom Tab Bar Style

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { View, Text } from 'react-native';

const Tab = createBottomTabNavigator();

const HomeScreen = () => (
  <View><Text>Home Screen</Text></View>
);

const ProfileScreen = () => (
  <View><Text>Profile Screen</Text></View>
);

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
          tabBarStyle: { backgroundColor: 'lightblue' },
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

ব্যাখ্যা:

• tabBarActiveTintColor এবং tabBarInactiveTintColor ব্যবহার করে ট্যাবের অ্যাক্টিভ এবং ইনঅ্যাক্টিভ স্টেটের জন্য রঙ নির্ধারণ করা হয়েছে।
• tabBarStyle এর মাধ্যমে ট্যাব বার এর ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা হয়েছে।

৫. Stack Navigation Customization

React Native এ Stack Navigator কাস্টমাইজ করার মাধ্যমে আপনি ট্রানজিশন এনিমেশন, হেডার কাস্টমাইজেশন, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন।

উদাহরণ: Custom Header and Animation

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { View, Text } from 'react-native';

const Stack = createStackNavigator();

const HomeScreen = () => (
  <View><Text>Home Screen</Text></View>
);

const ProfileScreen = () => (
  <View><Text>Profile Screen</Text></View>
);

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: { backgroundColor: 'tomato' },
          headerTintColor: '#fff',
          headerTitleAlign: 'center',
          cardStyle: { backgroundColor: 'lightgray' }, // Card style for screen
          gestureEnabled: true, // Enabling swipe gestures
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

ব্যাখ্যা:

• headerStyle, headerTintColor, এবং headerTitleAlign এর মাধ্যমে Header কাস্টমাইজ করা হয়েছে।
• gestureEnabled দিয়ে stack navigation swipe gesture সক্রিয় করা হয়েছে।

সারাংশ

React Native-এ Advanced Navigation Techniques এর মাধ্যমে আপনি অ্যাপের নেভিগেশন সিস্টেমকে আরও শক্তিশালী এবং কাস্টমাইজড করতে পারেন। Nested Navigators, **Deep Linking

**, Passing Parameters, Tab Bar Customization, এবং Stack Navigation Customization সবগুলোই নেভিগেশন সিস্টেমকে আরও ফ্লেক্সিবল এবং ব্যবহারকারীর জন্য সহজ করে তোলে।

Deep Linking এবং Dynamic Routing দুটি গুরুত্বপূর্ণ ধারণা যা React Native অ্যাপ্লিকেশনগুলোকে আরও কার্যকরী এবং ব্যবহারকারী বান্ধব করে তোলে। Deep Linking ব্যবহারকারীদেরকে অ্যাপ্লিকেশনের নির্দিষ্ট অংশে সরাসরি নিয়ে যেতে সাহায্য করে, যখন Dynamic Routing রুট বা পথের উপর নির্ভর করে কনটেন্ট পরিবর্তন করতে সক্ষম করে। নিচে এই দুটি ধারণার বিস্তারিত ব্যাখ্যা দেওয়া হল।

Deep Linking

Deep Linking হল একটি পদ্ধতি যা ব্যবহারকারীদেরকে সরাসরি মোবাইল অ্যাপ্লিকেশনের কোনো নির্দিষ্ট স্ক্রীন বা কনটেন্টে নিয়ে যেতে ব্যবহৃত হয়। এটি ওয়েব অ্যাপ্লিকেশনে URL এর মতো কাজ করে, কিন্তু মোবাইল অ্যাপ্লিকেশন প্রেক্ষাপটে। উদাহরণস্বরূপ, আপনি যদি কোনও নির্দিষ্ট পণ্য বা পোস্ট দেখাতে চান, তবে আপনি একটি deep link তৈরি করে ব্যবহারকারীকে সরাসরি সেই পৃষ্ঠায় নিয়ে যেতে পারেন।

React Native-এ Deep Linking কিভাবে কাজ করে?

React Native অ্যাপে Deep Linking কাজ করার জন্য আপনাকে react-navigation এবং Linking API ব্যবহার করতে হবে। Linking API একটি Web API যা URI স্কিম এবং URL থেকে ইনফরমেশন নিয়ে অ্যাপ্লিকেশনে প্রবাহিত করতে সাহায্য করে।

উদাহরণ:

1. Deep Linking Setup:
   React Native অ্যাপে deep linking সেটআপ করতে নিচের স্টেপগুলো অনুসরণ করতে হবে।
   • react-navigation এর মাধ্যমে রাউটিং সেটআপ করতে হবে।
   • Linking API ব্যবহার করে deep link URL কনফিগার করতে হবে।

১. react-navigation সেটআপ:

npm install @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-screens

2. Deep Linking কনফিগারেশন:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Linking } from 'react-native';

// স্ক্রীন কম্পোনেন্ট তৈরি
const HomeScreen = () => <Text>Home Screen</Text>;
const DetailsScreen = () => <Text>Details Screen</Text>;

// Stack Navigator তৈরি
const Stack = createStackNavigator();

const linking = {
  prefixes: ['myapp://'], // আপনার অ্যাপের URL স্কিম
  config: {
    screens: {
      Home: '',
      Details: 'details/:id', // ডিটেইল পেজের জন্য dynamic path
    },
  },
};

const App = () => {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

3. App Linking কনফিগারেশন:

এটি অ্যাপের Android এবং iOS কনফিগারেশনে ইন্টিগ্রেট করতে হবে।

• Android: AndroidManifest.xml ফাইলের মধ্যে নিম্নলিখিত কোড যোগ করুন:

  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" android:host="details" />
  </intent-filter>

• iOS: Info.plist ফাইলে নিচের কোড যোগ করুন:

  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>myapp</string>
      </array>
    </dict>
  </array>

Deep Linking এর সুবিধা:

• নির্দিষ্ট পৃষ্ঠায় দ্রুত প্রবেশ: ব্যবহারকারীদেরকে সরাসরি নির্দিষ্ট স্ক্রীনে নিয়ে যাওয়া যায়, যেমন একটি নির্দিষ্ট পণ্য বা খবর।
• আরও ইন্টারঅ্যাক্টিভ ইউজার এক্সপেরিয়েন্স: ব্যবহারকারীরা বিভিন্নভাবে অ্যাপের অংশগুলোতে প্রবেশ করতে পারেন।
• শেয়ারেবল লিঙ্ক: অন্যদেরকে অ্যাপের নির্দিষ্ট অংশে রেফার করতে পারবেন।

Dynamic Routing

Dynamic Routing হল এমন একটি রাউটিং পদ্ধতি যেখানে অ্যাপ্লিকেশন চলাকালীন রুট বা URL পরিবর্তিত হয়। এটি নির্দিষ্ট কন্ডিশন বা ডেটার ভিত্তিতে রাউটিং ব্যবস্থা পরিবর্তন করতে সহায়ক। এই প্রক্রিয়াতে ইউজার ডেটা বা অবস্থান অনুযায়ী কনটেন্ট, স্ক্রীন বা পৃষ্ঠার রাউট পরিবর্তন করা হয়।

React Native-এ Dynamic Routing:

React Navigation ব্যবহার করে dynamic routing সহজে ইমপ্লিমেন্ট করা যায়। React Navigation এর Stack Navigator বা Tab Navigator এর মাধ্যমে ডায়নামিক রাউটিং বাস্তবায়ন করা হয়, যেখানে params বা dynamic path ব্যবহার করা হয়।

উদাহরণ:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, Button } from 'react-native';

// স্ক্রীন কম্পোনেন্ট তৈরি
const HomeScreen = ({ navigation }) => {
  return (
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details', { itemId: 42 })}
    />
  );
};

const DetailsScreen = ({ route }) => {
  const { itemId } = route.params;
  return <Text>Details Screen, Item ID: {itemId}</Text>;
};

// Stack Navigator তৈরি
const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Dynamic Routing এর সুবিধা:

• ডেটা ভিত্তিক রাউটিং: ডায়নামিক রাউটিং ব্যবহার করে বিভিন্ন ডেটা অনুসারে কনটেন্ট পরিবর্তন করতে পারবেন, যেমন itemId, userId বা category।
• লজিকাল নেভিগেশন: একটি নির্দিষ্ট স্ক্রীনে কী তথ্য এবং কি ধরনের কনটেন্ট প্রদর্শিত হবে তা কন্ট্রোল করা যায়।
• ব্যবহারকারী অভিজ্ঞতা উন্নতি: ব্যবহারকারীর উদ্দেশ্য অনুযায়ী সঠিক স্ক্রীনে রিডাইরেক্ট করা যায়, যা ইউজার এক্সপেরিয়েন্সকে উন্নত করে।

সারাংশ

• Deep Linking: এটি ব্যবহারকারীদেরকে সরাসরি অ্যাপের নির্দিষ্ট স্ক্রীনে বা কনটেন্টে নিয়ে যাওয়ার সুবিধা প্রদান করে। এটি URL স্কিম এবং নির্দিষ্ট পাথ ব্যবহার করে অ্যাপ্লিকেশনের নির্দিষ্ট অংশে প্রবেশের সুযোগ দেয়।
• Dynamic Routing: এই পদ্ধতিতে URL বা রাউট পরিবর্তিত হয় কন্ডিশন বা ডেটার ভিত্তিতে। এটি ব্যবহারকারীর প্রয়োজন অনুযায়ী কনটেন্ট বা স্ক্রীন পরিবর্তন করতে সক্ষম করে।

উপরের দুটি ফিচারই অ্যাপ্লিকেশনের নেভিগেশন এবং ইউজার এক্সপেরিয়েন্সকে আরও শক্তিশালী ও ইন্টারেকটিভ করে তোলে।

React Native অ্যাপ্লিকেশনে Authentication Flow এবং Private Routes তৈরি করা একটি গুরুত্বপূর্ণ প্রক্রিয়া, যা অ্যাপের সিকিউরিটি নিশ্চিত করে এবং শুধুমাত্র অথেনটিকেটেড ব্যবহারকারীদের নির্দিষ্ট রুটে অ্যাক্সেস প্রদান করে।

এই গাইডে আমরা দেখব কীভাবে একটি Authentication Flow তৈরি করতে হয় এবং Private Routes সেট আপ করা যায়, যাতে শুধুমাত্র অথেনটিকেটেড ব্যবহারকারীরা নির্দিষ্ট স্ক্রীন বা রুট অ্যাক্সেস করতে পারে।

Authentication Flow কী?

Authentication Flow হল একটি সিস্টেম যেখানে ব্যবহারকারীরা অ্যাপ্লিকেশন ব্যবহারের আগে তাদের পরিচয় যাচাই করে। এই যাচাইকরণ প্রক্রিয়া সফল হলে তারা অ্যাপের নির্দিষ্ট অংশে প্রবেশ করতে সক্ষম হয় (যেমন, ড্যাশবোর্ড বা প্রাইভেট স্ক্রীন)। অন্যথায়, তারা লগইন স্ক্রীনে ফিরে যেতে বাধ্য হয়।

React Navigation Setup

React Native-এ রাউটিং এবং নেভিগেশন ব্যবস্থাপনার জন্য সাধারণত React Navigation লাইব্রেরি ব্যবহৃত হয়। আমরা এখানে React Navigation ব্যবহার করব।

React Navigation Setup:

1. প্রথমে react-navigation এবং অন্যান্য প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করুন:

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-gesture-handler react-native-reanimated
npm install react-native-screens react-native-safe-area-context

2. এরপর, আপনার অ্যাপ্লিকেশনের জন্য NavigationContainer এবং Stack Navigator কনফিগার করুন।

Authentication Flow এবং Private Routes

Step 1: Create Basic Navigation Structure

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import DashboardScreen from './screens/DashboardScreen';
import { AuthContext } from './context/AuthContext';

const Stack = createStackNavigator();

const App = () => {
  const { userToken, login, logout } = React.useContext(AuthContext);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {userToken == null ? (
          // If no user is authenticated, show Login Screen
          <Stack.Screen name="Login" component={LoginScreen} />
        ) : (
          // If authenticated, show Dashboard (Private Route)
          <Stack.Screen name="Dashboard" component={DashboardScreen} />
        )}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Explanation:

• প্রথমে userToken চেক করা হয়। যদি userToken না থাকে (অথবা ইউজার অথেনটিকেটেড না থাকে), তবে Login Screen দেখানো হবে।
• যদি userToken থাকে (অথবা ইউজার অথেনটিকেটেড থাকে), তবে Dashboard স্ক্রীন দেখানো হবে, যা একটি Private Route।

Step 2: Authentication Context Setup

আমরা Context API ব্যবহার করে ইউজার অথেনটিকেশন ম্যানেজমেন্ট করব। এই কন্টেক্সটটি আমরা যেকোনো স্ক্রীনে ইউজার অথেনটিকেশন স্টেট অ্যাক্সেস করার জন্য ব্যবহার করতে পারব।

1. AuthContext.js:

import React, { createContext, useState } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [userToken, setUserToken] = useState(null);

  const login = (token) => {
    setUserToken(token);
  };

  const logout = () => {
    setUserToken(null);
  };

  return (
    <AuthContext.Provider value={{ userToken, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

Explanation:

• AuthContext তৈরির মাধ্যমে আমরা login এবং logout ফাংশন এবং userToken স্টেট ব্যবহারকারীর লগইন স্টেট সেভ করব।
• login ফাংশন দিয়ে ব্যবহারকারী যখন লগইন করবে, তখন তাদের টোকেন সেভ হবে।
• logout ফাংশন দিয়ে ব্যবহারকারী লগ আউট করলে টোকেন সরিয়ে ফেলা হবে।

Step 3: Wrap the App with AuthProvider

AuthProvider কন্টেক্সট প্রোভাইডারকে অ্যাপের রুটের চারপাশে ব্যবহার করে, যাতে সারা অ্যাপ্লিকেশন জুড়ে কন্টেক্সট অ্যাক্সেস করা যায়।

import React from 'react';
import { AuthProvider } from './context/AuthContext';
import App from './App';

const Main = () => {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
};

export default Main;

Step 4: Login Screen and Private Route Navigation

এখন আমরা Login Screen তৈরি করব, যেখানে ব্যবহারকারী লগইন করলে, তাদের userToken কন্টেক্সটে সেট হবে এবং তারা প্রাইভেট রাউটের (যেমন, ড্যাশবোর্ড) অ্যাক্সেস পাবে।

1. LoginScreen.js:

import React, { useState, useContext } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { AuthContext } from '../context/AuthContext';

const LoginScreen = ({ navigation }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const { login } = useContext(AuthContext);

  const handleLogin = () => {
    // Here you would typically check the credentials from a backend
    if (username === 'user' && password === 'password') {
      const token = 'fakeToken123';  // In real apps, you'll get this from backend
      login(token);
      navigation.navigate('Dashboard');
    } else {
      alert('Invalid credentials');
    }
  };

  return (
    <View>
      <TextInput
        placeholder="Username"
        value={username}
        onChangeText={setUsername}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

export default LoginScreen;

Explanation:

• এখানে ব্যবহারকারী যখন লগইন ফর্ম পূর্ণ করে, তাদের ইউজারনেম এবং পাসওয়ার্ড যাচাই করা হচ্ছে।
• সফল লগইনের পরে, login ফাংশন ব্যবহার করে userToken কন্টেক্সটে সেট করা হচ্ছে এবং Dashboard স্ক্রীনে নেভিগেট করা হচ্ছে।

Step 5: Private Route (Dashboard)

Dashboard স্ক্রীনে কেবল তখনই প্রবেশ করা যাবে যখন ইউজার অথেনটিকেটেড থাকবে।

1. DashboardScreen.js:

import React, { useContext } from 'react';
import { View, Text, Button } from 'react-native';
import { AuthContext } from '../context/AuthContext';

const DashboardScreen = () => {
  const { logout } = useContext(AuthContext);

  return (
    <View>
      <Text>Welcome to the Dashboard</Text>
      <Button title="Logout" onPress={() => logout()} />
    </View>
  );
};

export default DashboardScreen;

Explanation:

• Dashboard Screen কেবল তখনই অ্যাক্সেসযোগ্য হবে যখন ব্যবহারকারী লগইন থাকবে।
• এখানে Logout বাটন যুক্ত করা হয়েছে, যা ব্যবহারকারীকে লগ আউট করতে সাহায্য করবে এবং অ্যাপ আবার Login Screen এ ফিরিয়ে নিয়ে যাবে।

Final Structure:

• AuthContext.js: ইউজার অথেনটিকেশন স্টেট এবং ফাংশন।
• App.js: রাউটিং এবং নেভিগেশন, প্রাইভেট রাউট সিকিউরিটি।
• LoginScreen.js: ইউজার লগইন স্ক্রীন।
• DashboardScreen.js: প্রাইভেট রাউট, যেখানে শুধুমাত্র অথেনটিকেটেড ইউজাররা প্রবেশ করতে পারবে।

Conclusion

• React Native অ্যাপ্লিকেশনে Authentication Flow এবং Private Routes সেটআপ করার জন্য আমরা Context API ব্যবহার করেছি।
• Private Routes নিশ্চিত করতে React Navigation এর মাধ্যমে আমরা userToken চেক করেছি, এবং সঠিকভাবে Login Screen বা Dashboard স্ক্রীন দেখানো হয়েছে।
• এই অ্যাপ্লিকেশনটি ব্যবহারে আপনার প্রাইভেট রাউটস এবং অথেনটিকেশন ফ্লো সুন্দরভাবে পরিচালিত হবে।

React Native অ্যাপে Drawer Navigation এবং Nested Navigation Stacks ব্যবহৃত হয় অ্যাপ্লিকেশনের বিভিন্ন স্ক্রীন বা পৃষ্ঠাগুলোর মধ্যে নেভিগেশন ব্যবস্থা পরিচালনা করতে। React Navigation হল সবচেয়ে জনপ্রিয় লাইব্রেরি, যা ড্রয়ার নেভিগেশন এবং স্ট্যাক নেভিগেশনসহ বিভিন্ন নেভিগেশন স্ট্রাকচার সহজেই পরিচালনা করতে সহায়ক।

এখানে আমরা Drawer Navigation এবং Nested Navigation Stacks এর মাধ্যমে React Native অ্যাপে স্ক্রীন পরিবর্তন এবং নেভিগেশন কনফিগার করতে শিখব।

১. Drawer Navigation

Drawer Navigation হলো একটি সাইড মেনু, যা সাধারণত অ্যাপের প্রধান স্ক্রীনের থেকে স্লাইডিং প্যানেল বা মেনু হিসেবে আসে। এটি ব্যবহারকারীদের অ্যাপের বিভিন্ন স্ক্রীন বা বিভাগে দ্রুত নেভিগেট করতে দেয়। React Native-এ Drawer Navigation কনফিগার করতে react-navigation/drawer প্যাকেজ ব্যবহার করা হয়।

Drawer Navigation ইনস্টলেশন

npm install @react-navigation/native @react-navigation/drawer react-native-screens react-native-safe-area-context
npm install react-native-gesture-handler react-native-reanimated

Drawer Navigation উদাহরণ

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Profile" onPress={() => navigation.navigate('Profile')} />
    </View>
  );
}

function ProfileScreen() {
  return (
    <View>
      <Text>Profile Screen</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

এখানে কী হচ্ছে:

• createDrawerNavigator() ব্যবহার করে ড্রয়ার নেভিগেশন তৈরি করা হয়েছে।
• Drawer.Navigator এবং Drawer.Screen কম্পোনেন্ট ব্যবহার করে Home এবং Profile স্ক্রীনগুলো ড্রয়ার মেনুতে যোগ করা হয়েছে।
• ড্রয়ার মেনু ব্যবহার করে ব্যবহারকারী Home এবং Profile স্ক্রীনে নেভিগেট করতে পারবেন।

২. Nested Navigation Stacks

Nested Navigation Stacks সাধারণত ব্যবহার করা হয় যখন আপনি একটি স্ক্রীনের ভিতরে আরও একটি নেভিগেশন স্ট্যাক চান। এটি একটি স্ক্রীনে একাধিক স্তরের নেভিগেশন পরিচালনা করতে সাহায্য করে, যেমন একটি ফিচার স্ক্রীনে যেতে যাওয়ার জন্য stack navigation বা ডিটেইল স্ক্রীন।

Nested Stack Navigation উদাহরণ

npm install @react-navigation/stack

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

// প্রথম স্ট্যাক স্ক্রীন
function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

// দ্বিতীয় স্ট্যাক স্ক্রীন
function DetailsScreen({ navigation }) {
  return (
    <View>
      <Text>Details Screen</Text>
      <Button title="Go to Sub Detail" onPress={() => navigation.navigate('SubDetail')} />
    </View>
  );
}

// তৃতীয় স্ট্যাক স্ক্রীন (Nested)
function SubDetailScreen() {
  return (
    <View>
      <Text>Sub Detail Screen</Text>
    </View>
  );
}

// Stack Navigator তৈরি
const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="SubDetail" component={SubDetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

এখানে কী হচ্ছে:

• createStackNavigator() ব্যবহার করে স্ট্যাক নেভিগেশন তৈরি করা হয়েছে।
• HomeScreen থেকে DetailsScreen এবং তারপর SubDetailScreen এ নেভিগেট করার জন্য একাধিক স্তরের নেভিগেশন তৈরি করা হয়েছে।

৩. Drawer Navigation এবং Nested Stack একসাথে ব্যবহার

আপনি একসাথে Drawer Navigation এবং Nested Stack Navigation ব্যবহার করতে পারেন, যাতে একটি ড্রয়ার মেনুতে একাধিক স্তরের স্ট্যাক নেভিগেশন পরিচালনা করতে পারবেন।

Drawer + Nested Stack Navigation উদাহরণ

import * as React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { View, Text, Button } from 'react-native';

// স্ট্যাক নেভিগেশন স্ক্রীন
function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View>
      <Text>Details Screen</Text>
      <Button title="Go to Sub Detail" onPress={() => navigation.navigate('SubDetail')} />
    </View>
  );
}

function SubDetailScreen() {
  return (
    <View>
      <Text>Sub Detail Screen</Text>
    </View>
  );
}

// Stack Navigator তৈরি
const Stack = createStackNavigator();
function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
      <Stack.Screen name="SubDetail" component={SubDetailScreen} />
    </Stack.Navigator>
  );
}

// Drawer Navigator তৈরি
const Drawer = createDrawerNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={StackNavigator} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

এখানে কী হচ্ছে:

• StackNavigator তৈরি করা হয়েছে, যা Home, Details, এবং SubDetail স্ক্রীনগুলির স্ট্যাক নেভিগেশন পরিচালনা করে।
• ড্রয়ার মেনুর মধ্যে শুধুমাত্র StackNavigator পাস করা হয়েছে। এটি Home স্ক্রীন থেকে ডিটেইলস স্ক্রীনে এবং সাব-ডিটেইল স্ক্রীনে নেভিগেট করার জন্য ব্যবহৃত হবে।

সারাংশ

• Drawer Navigation হলো একটি সাইড মেনু, যা ব্যবহারকারীদের অ্যাপের বিভিন্ন স্ক্রীনে নেভিগেট করার সুযোগ দেয়। React Native-এ এটি @react-navigation/drawer ব্যবহার করে কনফিগার করা হয়।
• Nested Stack Navigation ব্যবহৃত হয় যখন একটি স্ক্রীনে একাধিক স্তরের নেভিগেশন প্রয়োজন হয়। React Native-এ @react-navigation/stack ব্যবহার করে এটি কনফিগার করা হয়।
• আপনি একসাথে Drawer Navigation এবং Nested Stack Navigation ব্যবহার করতে পারেন, যাতে একটি ড্রয়ার মেনুতে একাধিক স্তরের নেভিগেশন কার্যকরীভাবে পরিচালনা করা যায়।

এটি React Native অ্যাপের নেভিগেশন কাঠামো আরও শক্তিশালী ও ব্যবহারকারী বান্ধব করে তোলে।

React Navigation হলো React Native অ্যাপ্লিকেশনগুলোতে নেভিগেশন পরিচালনার জন্য একটি জনপ্রিয় লাইব্রেরি। একদিকে, Redux অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট জন্য ব্যবহৃত হয়। কখনও কখনও, আমরা চাই যে আমাদের অ্যাপ্লিকেশনটি নেভিগেশন এবং স্টেট ম্যানেজমেন্টকে একসাথে পরিচালনা করুক। React Navigation এবং Redux-এর সঠিক ইন্টিগ্রেশন আমাদের অ্যাপ্লিকেশনকে আরও শক্তিশালী এবং স্কেলেবল করতে সাহায্য করে।

Redux এবং React Navigation এর ইন্টিগ্রেশন সাধারণত স্টেট ম্যানেজমেন্ট এবং নেভিগেশন অবস্থার মধ্যে তথ্য স্থানান্তর করতে সহায়ক হয়। যেমন, যদি কোনও ব্যবহারকারী একটি পেজে প্রবেশ করার সময় কিছু স্টেট পরিবর্তন করে, তখন Redux সেটি সঠিকভাবে ট্র্যাক করতে এবং React Navigation এর মাধ্যমে অ্যাপ্লিকেশনে সেই পরিবর্তন প্রভাব ফেলতে সাহায্য করে।

Step 1: প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করা

প্রথমে, আপনাকে React Navigation এবং Redux-এর জন্য প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে।

npm install @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-screens react-navigation redux react-redux

Step 2: Redux Setup

১. Redux Store তৈরি করা:

প্রথমে Redux Store সেট আপ করতে হবে। Redux স্টোরের মধ্যে আপনি আপনার অ্যাপের গ্লোবাল স্টেট সংরক্ষণ করবেন।

// store.js
import { createStore } from 'redux';

// Simple Reducer
const initialState = {
  user: null,
  isLoggedIn: false,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        user: action.payload,
        isLoggedIn: true,
      };
    case 'LOGOUT':
      return {
        ...state,
        user: null,
        isLoggedIn: false,
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

২. Redux Provider যোগ করা:

আপনি আপনার অ্যাপ্লিকেশনে Redux Store ব্যবহার করার জন্য Provider-এর মাধ্যমে স্টোরটি অ্যাপের মধ্যে প্রদান করবেন।

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider } from 'react-redux';
import store from './store';  // store.js থেকে স্টোর ইনপোর্ট করুন
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Login" component={LoginScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
};

export default App;

Step 3: React Navigation Integration with Redux

React Navigation এবং Redux একত্রে ব্যবহারের জন্য আমরা সাধারণত React Navigation এর useNavigation হুক এবং Redux এর useSelector এবং useDispatch হুক ব্যবহার করি।

১. Redux স্টেট ব্যবহার করা:

ধরি, আমাদের একটি HomeScreen যেখানে আমাদের লগ ইন স্টেট চেক করতে হবে এবং সেই অনুযায়ী নেভিগেট করতে হবে।

// screens/HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigation } from '@react-navigation/native';

const HomeScreen = () => {
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const isLoggedIn = useSelector(state => state.isLoggedIn);

  const handleLogin = () => {
    // Dispatch login action
    dispatch({
      type: 'LOGIN',
      payload: { name: 'John Doe' },
    });
    navigation.navigate('Login');
  };

  return (
    <View>
      <Text>{isLoggedIn ? 'Welcome Back!' : 'Please Log in'}</Text>
      {!isLoggedIn && <Button title="Login" onPress={handleLogin} />}
    </View>
  );
};

export default HomeScreen;

২. LoginScreen-এ Redux স্টেট আপডেট করা:

এখানে আমরা LoginScreen তৈরি করব, যেখানে Redux এর মাধ্যমে লগ ইন স্টেট আপডেট হবে এবং নেভিগেশন পরিচালনা করা হবে।

// screens/LoginScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useDispatch } from 'react-redux';

const LoginScreen = () => {
  const dispatch = useDispatch();

  const handleLogout = () => {
    // Dispatch logout action
    dispatch({ type: 'LOGOUT' });
  };

  return (
    <View>
      <Text>You are logged in now.</Text>
      <Button title="Logout" onPress={handleLogout} />
    </View>
  );
};

export default LoginScreen;

Step 4: Redux and Navigation Flow

এখন, আমরা দেখেছি কিভাবে HomeScreen এবং LoginScreen এর মধ্যে Redux এবং React Navigation একসাথে কাজ করছে:

• HomeScreen এ, আমরা Redux Store থেকে লগ ইন স্টেট ব্যবহার করি এবং যদি ব্যবহারকারী লগ ইন না থাকে তবে LoginScreen-এ নেভিগেট করি।
• LoginScreen এ, ব্যবহারকারী লগ আউট করার পর, Redux স্টেটকে আপডেট করে এবং লগ আউট হয়ে HomeScreen-এ ফিরিয়ে আনা হয়।

Step 5: App Flow এবং Redux Handling

এটি আমাদের অ্যাপ্লিকেশনের React Navigation এবং Redux এর একত্রে ব্যবহারের মাধ্যমে একটি সাধারণ স্টেট ম্যানেজমেন্ট এবং নেভিগেশন ব্যবস্থাপনা। এই কাঠামোটি অ্যাপ্লিকেশনগুলিতে স্টেট ব্যবস্থাপনা এবং নেভিগেশন উভয়ই সুসংগতভাবে পরিচালনা করতে সহায়ক।

সারাংশ

React Navigation এবং Redux একত্রে ব্যবহারের মাধ্যমে আমরা অ্যাপ্লিকেশনের নেভিগেশন এবং স্টেট ম্যানেজমেন্ট একসাথে পরিচালনা করতে পারি। React Navigation আমাদের নেভিগেশন স্টেট ম্যানেজ করতে সাহায্য করে, আর Redux আমাদের অ্যাপের গ্লোবাল স্টেট ম্যানেজ করতে সক্ষম। useSelector এবং useDispatch হুক ব্যবহার করে Redux স্টোর থেকে ডাটা নিয়ে React Navigation এর মাধ্যমে নেভিগেশন পরিচালনা করা সহজ হয়।